import Vue from "vue";
import Vuex from "vuex";

//持久化Vuex（解决浏览器刷新后，数据回到初始状态）
//本质：把vuex数据保存到客户端的缓存中
import  createPersistedState  from "vuex-persistedstate";
Vue.use(Vuex);
//创建一个数据仓库(Store)
const store = new Vuex.Store({
  plugins: [
      createPersistedState  ({
        key:'vuex',
        // storage:window.localStorage
		paths:['list','around_list','cart'], //要保存的state名称，不配置保存所有
		storage: {
			//指定存储方式
			getItem: (key) => uni.getStorageSync(key),
			setItem: (key, value) =>uni.setStorageSync(key,value),
			removeItem: (key) => uni.removeStorageSync(key)
		}
      })
  ],
  state: {
	  num:0,
	  list:[], //a1 :心愿列表
	  around_list:[], //周边商分类对应的列表
	  //空购物车
	  cart:{
	  	list:[
	  		//产品列表数组
			/* {
				cid: 1,
				id: 1,
				name: "茅台",
				num: 0,
				pic: "http://localhost:3000/shpic/c101.jpg",
				price: 2988
			},
			{
				cid: 2,
				id: 2,
				name: "茅台2",
				num: 0,
				pic: "http://localhost:3000/shpic/c101.jpg",
				price: 2988
			} */
	  	],
	  	total_num:0,//总价
	  	total_price:0//总价
	  }
  },
  getters:{
	show_list:function(state){
		console.log(state)
		let around_list = state.around_list;//api原始数据
		let cart_list = state.cart.list; //购物车中的数据
		
		let new_list = around_list.map(item=>{
			// item 循环数组时候的每个元素
			//找当前产品是否在购物车中,返回一个数组
			let pro = cart_list.filter(val=>{
				return item.id == val.id; //根据id找
			})
			//around_list 里面对应的产品数量修改 成 购物车中产品的数量
			console.log("find pro:",pro)
			if(pro.length>0){
				item.num = pro[0].num;
			}
			//返回修改数量的产品
			return item;
		})
		return new_list;
	}
  },
  mutations:{
	  //a3.定义修改数据 的mutation方法
	  //state 状态
	  //data 修改的数据
	  SETLIST(state,data){
		  console.log("调用mutations,设置列表",data)
		  state.list = data;
	  },
	  EDITITEM(state,num){
		  console.log("在mutation中，准备修改数据")
		  state.list.splice(num,1)
	  },
	  CLEARLIST(state,num){
		  console.log("在mutation中，删除数据")
		  state.list=[]
	  },
	  SETCATELIST(state,data){
		  console.log("调用mutations,设置列表",data)
		  state.around_list = data;
	  },
	  SETCART(state,data){
		  console.log("调用mutations,设置购物车",data)
		  state.cart = data;
	  }
  },
  actions:{
	  //context = {state,commit}
	  delItem(context,data){
		  console.log("提交一个action，准备修改数据")
		  //异步操作等...
		  //提交一个mutation，修改数据的唯一方法
		  context.commit("EDITITEM",data)
	  },
	  async getList(){
		   //异步操作等..
		  //axios.get().then()
		  //提交一个mutation，修改数据的唯一方法
		  let data = await  axios.get();
		  context.commit("SETLIST",data)
	  }
  }
});
export default store;